<!-- 新增/修改弹框 -->
<template>
  <!-- 新增/修改弹窗 -->
  <el-dialog
    v-model="visible"
		:width="screenWidth"
		:fullscreen="mobile === 'mobile'"
    :title="dialogDetail.title"
    draggable
    @close="closeDialog"
		close-icon="CloseBold"
	>
		<el-descriptions
			class="margin-top"
			:column="itemSpan"
			:size="'large'"
			border
		>
			<el-descriptions-item label-align="right">
				<template #label>
					<div class="cell-item">
						命令名称
					</div>
				</template>
				{{formData.name}}
			</el-descriptions-item>
<!--			<el-descriptions-item label-align="right">-->
<!--				<template #label>-->
<!--					<div class="cell-item">-->
<!--						设备分类-->
<!--					</div>-->
<!--				</template>-->
<!--				{{ProjectCheckInDeviceTypeFilter(formData.deviceType)}}-->
<!--			</el-descriptions-item>-->
<!--			<el-descriptions-item label-align="right">-->
<!--				<template #label>-->
<!--					<div class="cell-item">-->
<!--						命令代码-->
<!--					</div>-->
<!--				</template>-->
<!--				{{formData.operator}}-->
<!--			</el-descriptions-item>-->
			<el-descriptions-item label-align="right">
				<template #label>
					<div class="cell-item">
						命令编码
					</div>
				</template>
				{{formData.code}}
			</el-descriptions-item>
			<el-descriptions-item label-align="right">
				<template #label>
					<div class="cell-item">
						是否自动执行
					</div>
				</template>
				<el-tag :type="formData.isAuto ? '' : 'danger'">{{ formData.isAuto ? '是' : '否' }}</el-tag>
			</el-descriptions-item>
			<el-descriptions-item label-align="right">
				<template #label>
					<div class="cell-item">
						是否禁用
					</div>
				</template>
				<el-tag :type="!formData.isDisable ? 'success' : 'danger'">{{ !formData.isDisable ? '启用' : '禁用' }}</el-tag>
			</el-descriptions-item>
			<el-descriptions-item label-align="right">
				<template #label>
					<div class="cell-item">
						创建时间
					</div>
				</template>
				{{formData.createTime}}
			</el-descriptions-item>
		</el-descriptions>

    <template #footer>
      <div class="dialog_footer">
        <el-button @click="closeDialog()">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {ref, reactive, nextTick, computed} from "vue";
import {
	getCheckInDeviceCommandInfo
} from "@/api/system/device/index.ts";
import { DeviceFormType } from "@/api/system/device/types";
import { getDicts } from "@/store/modules/dict";

import {useScreen} from "@/store/modules/screen";

const screenStore = useScreen()
const mobile = computed(() => ( screenStore.device ));
const screenWidth = ref(900)
const itemSpan = ref(2)

function initScreen(){
	if(mobile.value === 'mobile'){
		screenWidth.value = screenStore.screenWidth;
		itemSpan.value = 1;
	}else {
		screenWidth.value = 900;
		itemSpan.value = 2;
	}
}

const props = defineProps({
  dialogDetail: {
    type: Object,
    default: () => ({
      visible: false,
      title: "新增设备信息",
      footBtn: "新增",
      id: 0,
    }),
  },
});

const emit = defineEmits(["sendDetailClose"]);

const loading = ref(false);
let visible = ref(props.dialogDetail.visible);
const formData = reactive<DeviceFormType>({});
const addOrEditFormRef = ref(ElForm);

onMounted(async () => {
	initScreen()
	
  let tempFormData;
  if (props.dialogDetail.id) {
		loading.value = true;
    tempFormData = await getCheckInDeviceCommandInfo(props.dialogDetail.id);
    tempFormData = tempFormData.data;
    Object.assign(formData, tempFormData);
		loading.value = false;
    tempFormData = null;
  }
});

/* 发送当前弹窗关闭 */
function sendDetailClose(query) {
  emit("sendDetailClose",query);
}

/**
 * 关闭弹窗
 */
function closeDialog(query) {
  visible.value = false;
	sendDetailClose(query);
  resetForm();
}

/**
 * 重置表单
 */
function resetForm() {
  formData.id = undefined;
}

function ProjectCheckInDeviceTypeFilter(val){
	let temp = ProjectCheckInDeviceType.filter(item => item.value === val)
	if(temp && temp[0]){
		return temp[0].label;
	}else {
		return ''
	}
}

const ProjectCheckInDeviceType = getDicts("projectCheckInDeviceType"); //银行类别
</script>

<style lang="scss" scoped>
.cell-item{
	font-size: 15px;
	//font-weight: bold;
	color: #938d8d;
}
</style>
